<template>
  <div class="wrapper">
    <el-row>
      <el-button @click="back" icon="el-icon-arrow-left" type="info"></el-button>
      <el-button @click="openUploadDialog" type="primary">上传文件</el-button>
      <el-button @click="deleteSelectDocument" type="danger" :disabled="buttonStatus.delete">删除</el-button>
    </el-row>
    <el-table
      :data="documentList"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      v-loading="isLoading"
      @cell-mouse-enter="mouseEnter"
      @cell-mouse-leave="mouseLeave"
      @row-click="rowClick"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="文件名">
        <template slot-scope="scope">
          <el-row>
            <svg-icon :icon-class="scope.row.simpleType" class="name_icon"></svg-icon>
            <span class="span_name">{{ scope.row.name }}</span>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column prop="showsize" label="大小"></el-table-column>
      <el-table-column prop="lastModifiedDate" label="修改时间"></el-table-column>
      <el-table-column fixed="right">
        <template slot-scope="scope" v-if="scope.row.isShowIcon">
          <i class="el-icon-download operation_icon" @click="downloadDocument(scope.row.url)"></i>
          <i class="el-icon-delete operation_icon" @click="deleteDocumentBox(scope.row.id, scope.row.key)"></i>
          <i class="el-icon-edit operation_icon" @click="renameDocumentBox(scope.row.id)"></i>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getDocument"
    />
    <el-dialog title="上传文档" :visible="uploadDocVisible" width="50%" :before-close="closeUploadDocDialog">
      <upload-doc :folderId="folderId"></upload-doc>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from './components/pagination'
import uploadDoc from './components/uploadDoc'
import * as documentApi from '../../api/document'
import {fmtDate2} from '../../utils/DateUtil'
import {unit} from '../../utils/bitSizeUtil'
import {messageError, messageSuccess, messageWarning} from '../../utils/message'
export default {
  name: 'documentList',
  components: {uploadDoc, Pagination},
  data() {
    return {
      folderId: null,
      uploadDocVisible: false,
      documentList: [],
      selectDocumentList: [],
      buttonStatus: {delete: true},
      isLoading: false,
      total: 0,
      listQuery: {
        page: 1,
        limit: 10
      },
      rowClickFlag: true
    }
  },
  created() {
    this.folderId = this.$route.query.id
    this.getDocument()
  },
  methods: {
    openUploadDialog() {
      this.uploadDocVisible = true
    },
    closeUploadDocDialog() {
      this.uploadDocVisible = false
      this.getDocument()
    },
    handleSelectionChange(val) {
      this.selectDocumentList = val
      if (this.selectDocumentList.length === 0) {
        this.buttonStatus.delete = true
      } else {
        this.buttonStatus.delete = false
      }
    },
    getDocument() {
      this.isLoading = true
      let params = {folderId: this.folderId, pageSize: this.listQuery.limit, currentPage: this.listQuery.page}
      documentApi
        .getDocumentPage(params)
        .then(response => {
          let data = response.data.items
          this.total = response.data.totalNum
          data.forEach(item => {
            item.lastModifiedDate = fmtDate2(item.lastModifiedDate)
            item.showsize = unit(item.size)
            item.isShowIcon = false
          })
          this.documentList = data
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    deleteSelectDocument() {
      this.$confirm('确定要删除文件吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        this.selectDocumentList.forEach(item => {
          this.deleteDocument(item.id, item.key)
        })
      })
    },
    deleteDocumentBox(id, key) {
      this.rowClickFlag = false
      this.$confirm('确定要删除文件吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        this.deleteDocument(id, key)
      })
    },
    deleteDocument(id, key) {
      let params = {id: id, key: key}
      documentApi.deleteDocument(params).then(response => {
        messageSuccess('删除成功')
        this.getDocument()
      })
    },
    downloadDocument(url) {
      this.rowClickFlag = false
      window.open(url)
    },
    renameDocumentBox(id) {
      this.rowClickFlag = false
      this.$prompt('文件重命名', '创建文件', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: null,
        inputErrorMessage: '文件名称不能为空'
      })
        .then(value => {
          this.renameDocument(id, value.value)
        })
        .catch(() => {})
    },
    renameDocument(id, name) {
      let params = {id: id, name: name}
      documentApi.renameDocument(params).then(response => {
        this.getDocument()
        messageSuccess('重命名成功')
      })
    },
    rowClick(row) {
      if (this.rowClickFlag) {
        this.openDocument(row)
      }
      this.rowClickFlag = true
    },
    openDocument(row) {
      let officeUrl = 'https://view.officeapps.live.com/op/view.aspx'
      if (row.size === 0) {
        messageWarning('文件大小为0，无法打开')
        return
      }
      if (row.simpleType === 'word' || row.simpleType === 'ppt') {
        if (row.size / 1024 / 1024 > 10) {
          messageWarning('文件太大，无法在线打开')
          return
        }
        window.open(officeUrl + '?src=' + encodeURIComponent(row.url))
      } else if (row.simpleType === 'excel') {
        if (row.size / 1024 / 1024 > 5) {
          messageWarning('文件太大，无法在线打开')
        }
        window.open(officeUrl + '?src=' + encodeURIComponent(row.url))
      } else if (row.simpleType === 'pdf') {
        window.open(row.url)
      } else {
        messageWarning('不支持此格式的文件')
      }
    },
    mouseEnter(row, column, cell, event) {
      row.isShowIcon = true
    },
    mouseLeave(row, column, cell, event) {
      row.isShowIcon = false
    },
    back() {
      this.$router.go('-1')
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  margin: 10px;
  .name_icon {
    height: 25px;
    width: 25px;
  }
  .span_name {
    margin-left: 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .operation_icon {
    cursor: pointer;
    margin-left: 5px;
    margin-right: 5px;
  }
}
</style>
